<!DOCTYPE html>
<html>
<head>
  <title>Earthquakes Heatmap</title>
  <link rel="stylesheet" type="text/css" href="../../../libs/ol4/ol.css"/>
  <style type="text/css">
    body, #map {
      border: 0px;
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      font-size: 13px;
      overflow: hidden;
    }
    .radius{
      position: absolute;
      top: 15px;
      right:15px;
      z-index: 9;
      width: auto;
    }
    .radius input[type=range]{
      width: 300px;
    }
  </style>
  <script type="text/javascript" src="../../../libs/ol4/ol.js"></script>
  <script type="text/javascript" src="../../../libs/jquery/jquery-3.1.1.min.js"></script>
  <script type="text/javascript" src="data/heatmap.js"></script>
</head>
<body>
<div class="radius">
  radius:<span id="vradius">15</span><input type="range" min="0" max="100" step="1" id="radius" value="15"><br/>
  blur:<span id="vblur">50</span><input type="range" min="0" max="100" step="1" id="blur" value="50">
</div>
<div id="map"></div>
<script>
    var features = (new ol.format.GeoJSON()).readFeatures(result);
    for(var i=0;i<features.length;i++){
        var _feature = features[i];
        var _geom = features[i].getGeometry();
        _feature.setGeometry(_geom);
    }
    var vectorSource = new ol.source.Vector({
        features: features
//              url:'data/heatmap.geojson',
//              format: new ol.format.GeoJSON()
    });

    var heatmap = new ol.layer.Heatmap({
        source: vectorSource,
        blur: parseInt($("#blur").val()),
        radius: parseInt($("#radius").val()),
        opacity:1,
        shadow:500
    });
    //          $("#radius").on("input", function(){
    $("#radius").on("change", function(){
        heatmap.setRadius(parseInt($(this).val()));
        $("#vradius").html($(this).val());
    });
    $("#blur").on("change", function(){
        heatmap.setBlur(parseInt($(this).val()));
        $("#vblur").html($(this).val());
    });
    heatmap.getSource().on('addfeature', function(event) {
        var name = event.feature.get('name');
        var magnitude = parseFloat(name.substr(2));
        event.feature.set('weight', magnitude - 5);
    });
    var bounds = [73.4510046356223, 18.1632471876417,
        134.976797646506, 53.5319431522236];
    var projection = new ol.proj.Projection({
        code: 'EPSG:4326',
        units: 'degrees'
    });
    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }),
        target: 'map',
        layers: [
            heatmap
        ],
        view: new ol.View({
            projection: projection
        })
    });
    map.getView().fit(bounds, map.getSize());
</script>
</body>
</html>